/******************************************************************************************
 * Import
 ******************************************************************************************/

//  module
import React, {Component} from 'react';
import {StyleSheet, View, Text, Dimensions, TextInput, TouchableHighlight} from 'react-native';
import resolveAssetSource from 'resolveAssetSource';
import { Icon, Toast, Checkbox } from 'antd-mobile-rn';
import SplashScreen from 'react-native-splash-screen';

// project
import {
	Page, Content, Float, Header, Footer, Row, Between, Center, Wrap, Round, Item, ItemX, ItemY, Label, Image, Hand
} from '../../library';
import {Auth, HttpTemp} from '../../preset';

/******************************************************************************************
 * Export Class
 ******************************************************************************************/

const Scwidth = Dimensions.get('window').width;
const ScHeight = Dimensions.get('window').height;

export default class Login extends Component {

	/*------------------------------------------------------------------------------------
	 * 初始化
	 *-----------------------------------------------------------------------------------*/
	constructor(props){
		super(props);

		/**
		 * state
		 */
		this.state = {

			regMobile: '',				// 注册手机号
			regCode: '',				// 注册验证码
			regPassword: '',			// 注册密码
			regAgreexy: true,			// 默认用户协议选中

			loginMobile: '',			// 登录手机号
			loginPassword: '',			// 登录密码

			//配置初始页面是哪个 0 登录 1注册
			showPage:0,

			//配置用户协议是否显示
			showAgreeText:false,
			
			//登录页面的设置
			//设置顶部图片
			topImg: require('../../assets/logintop.png'),
			topImgWidth:Scwidth,
			topImgHeight:0,

			//输入区域的设置
			InputAreaHeight:0,

			//验证码秒数
			VercodeTime:10,
			VercodeText:"获取验证码",
			VercodeActive:true,

			//密码可见性
			seePass:require("../../assets/seepass.png"),
			noseePass:require("../../assets/noseepass.png"),
			canseePass:false,
        };
	}
	
	/*------------------------------------------------------------------------------------
	 * 生命周期
	 *-----------------------------------------------------------------------------------*/
	/**
	 * willMount
	 */
    componentWillMount(){
		SplashScreen.hide();
		let img = resolveAssetSource(this.state.topImg);
		this.setState({
			topImgHeight:img.height * (Scwidth/img.width),
			InputAreaHeight:ScHeight - img.height * (Scwidth/img.width) - 80
		})
    }
	
	/*------------------------------------------------------------------------------------
	 * 自定义方法
	 *-----------------------------------------------------------------------------------*/
	/**
	 * 点击获取验证码
	 */
	getVerCode = ()=>{
		if (this.state.regMobile == '') {
			Toast.info('请填写手机号码');
			return;
		}

		// 发送验证码
		HttpTemp.post({
			url: '/page/arrive/sendmsg.php',
			data: {
				set_mobile: this.state.regMobile,
			},
			success: (res)=> {
				
				// 制作倒计时
				let time = this.state.VercodeTime;
				let text = this.state.VercodeText;
				let time_time = "秒后重发";

				Toast.info('验证码发送成功');

				if(this.state.VercodeActive) {
					//发送短信接口
					this.setState({
						VercodeTime: time,
						VercodeText: time + time_time,
						VercodeActive: false,
					})

					Runtime = ()=>{
						setTimeout(()=>{
							if(this.state.VercodeTime > 1){
								this.setState({
									VercodeTime: this.state.VercodeTime - 1,
									VercodeText: this.state.VercodeTime - 1 + time_time,
									VercodeActive: false,
								})
								Runtime();	
							}else{
								this.setState({
									VercodeTime: time,
									VercodeText: text,
									VercodeActive: true,
								})	
							}	
						},1000);		
					}
					Runtime();
				}
			}
		});
	}

	/**
	 * 登录
	 */
	onLogin = ()=> {
		HttpTemp.post({
			url: '/page/arrive/login.php',
			data: {
				set_mobile: this.state.loginMobile,
				set_password: this.state.loginPassword
			},
			success: (res)=> {
				Toast.info('登录成功');

				// 维护auth
				Auth.login({
					token: res.token,
					uid: res.uid
				});

				// 跳转到首页
			}
		});
	}

	/**
	 * 注册
	 */
	onReg = () => {
		HttpTemp.post({
			url: '/page/arrive/register.php',
			data: {
				set_mobile: this.state.regMobile,
				set_password: this.state.regPassword,
				code: this.state.regCode
			},
			success: (res)=> {
				Toast.info('注册成功');

				// 维护auth
				Auth.login({
					token: res.token,
					uid: res.uid
				});

				// 跳转到首页
			}
		});
	}

	/**
	 * 点击密码可见
	 */
	seePass = () => {
		if(this.state.canseePass){
			this.setState({
				canseePass:false
			})	
		}else{
			this.setState({
				canseePass:true
			})	
		}
	}

	/*------------------------------------------------------------------------------------
	 * 渲染
	 *-----------------------------------------------------------------------------------*/
	render() {
		return (
			<Page>
				<Content bg='#efeff4' >

					{/* 用户协议内容 star */}
					<View style={[{ width: Scwidth, minHeight:ScHeight-30, backgroundColor:"white"}, this.state.showAgreeText?{}:{ display:"none" }]}>
						<ItemY x="center" y="center" style={{ height:40 }}>
							<TouchableHighlight style={{ width:30, height:30, position:"absolute", left:10, top:10 }}
								underlayColor="rgba(0,0,0,0)"
								onPress={()=>{
									this.setState({	
										showAgreeText:false,
									});
								}}
							>
							<Icon type='left' size='md' color='#00CC66' />
							</TouchableHighlight>
							<Text style={{ fontSize:18, justifyContent:"flex-end"}}>用户协议</Text>
						</ItemY>
						
						<ItemY style={{ width:Scwidth/24*22, marginLeft:Scwidth/24*1 }}>
							<Text size='14' color='#333' mb='12'>特别提示</Text>
							<Text color='#333' lh='18'>   深圳市零壹移动互联系统有限公司（下称零壹）在此特别提醒用户认真阅读、充分理解本《服务协议》（下称《协议》）中各条款，包括免除或者限制零壹旗下产品“1号社区”移动应用责任的免责条款及对用户的权利限制条款。请你审慎阅读并选择接受或不接受本《协议》（未成年人应在法定监护人陪同下阅读）。除非你接受本《协议》，否则你无权注册、登录、使用本协议所涉相关服务。你的注册、登陆、使用等行为将视为对本《协议》的接受，并同意接受本《协议》各项条款的约束。</Text>

							<Text color='#333' lh='18'>   本《协议》是你（下称用户）与零壹之间关于用户注册、登录、使用“1号社区”移动应用服务所订立的协议，本协议描述“1号社区”移动应用与用户之间关于服务相关方面的权利义务。“用户”指注册、登录、使用本服务的个人或组织。</Text>
							<Text mb='10'  color='#333' lh='18'>   本《协议》可由零壹随时更新，更新后的协议条款一旦公布即代替原来的协议条款，恕不再另行通知，用户可在“1号社区”移动应用中查阅最新协议条款。在零壹修改《协议》条款后，如果用户不接受修改后的服务，请立即停止使用“1号社区”提供的服务，用户继续使用“1号社区”提供的服务将被视为已接受了修改后的协议。</Text>
							<Text color='#333' lh='18'>一、账号注册</Text>
							<Text color='#333' lh='18'>1、用户在使用本服务前需要注册一个“1号社区”账号。“1号社区”账号应当使用手机号码绑定注册，请用户使用尚未与“1号社区”账号绑定的手机号码，以及未被零壹根据本协议封禁的手机号码注册“1号社区”账号。零壹可以根据用户需求或产品需要对账号注册和绑定的方式进行变更，而无须事先通知用户。</Text>
							<Text color='#333' lh='18'>2、“1号社区”系基于地理位置的移动应用，用户注册时应当授权零壹公开及使用其地理位置信息方可成功注册“1号社区”账号。故用户完成注册即表明用户同意零壹提取、公开及使用用户的地理位置信息。</Text>
							<Text color='#333' lh='18'>3、鉴于“1号社区”账号的绑定注册方式，您同意零壹在注册时将使用您提供的手机号码及/或自动提取您的手机号码及自动提取您的手机设备识别码等信息用于注册。</Text>
						</ItemY>
					</View>
					{/* 用户协议内容 end */}

					{/* 主体内容 star */}
					<View style={[{ width: Scwidth},  !this.state.showAgreeText?{}:{ display:"none" }]}>

						{/* 头部 返回+背景 star */}
						<View style={{ backgroundColor:"rgba(16, 23, 52, 1)", width:Scwidth, height:100 }}>
							<TouchableHighlight style={{  width:30, height:30, position:"absolute", left:10, top:10 }}
								underlayColor="rgba(0,0,0,0)"
								onPress={()=>{
									
								}}
							>
								<Icon  type='left' size='md' color='#fff' />
							</TouchableHighlight>

						</View>
						<View style={{ backgroundColor:"rgba(16, 23, 52, 1)", width:Scwidth}}>
							<Image
								source={this.state.topImg}
								w={Scwidth}
								h={this.state.topImgHeight.toString()}
							/>
						</View>
						{/* 头部 返回+背景 end */}

						<View style={{ alignItems:"center", justifyContent:"center", backgroundColor:"white", width:Scwidth/24*22, height:this.state.InputAreaHeight, borderRadius:5, marginLeft:Scwidth/24*1, marginTop:-60 }}>
							<Wrap y="top">
								<Hand h='60' w={Scwidth/24*22}>

									{/* 登陆注册标签栏 star */}
									<TouchableHighlight style={{width:Scwidth/24*11, borderRadius:10}} underlayColor="#fff" onPress={()=>{
										this.setState({
											showPage:0
										})
									}}>
										<Hand y="center" x='center' f='1'>
											<Text style={[style.topText, !this.state.showPage?style.green:style.gray, !this.state.showPage?style.topTextActive:{}]}>登录</Text>
										</Hand>
									</TouchableHighlight>

									<TouchableHighlight style={{width:Scwidth/24*11, borderRadius:10}} underlayColor="#fff" onPress={()=>{
										this.setState({
											showPage:1
										})
									}}>
										<Hand y="center" x='center' f='1'>
											<Text style={[style.topText, this.state.showPage?style.green:style.gray, this.state.showPage?style.topTextActive:{}]}>注册</Text>
										</Hand>
									</TouchableHighlight>
									{/* 登陆注册标签栏 end */}

								</Hand>

								{/* 登录 star */}
								<View style={ !this.state.showPage?{}:{ display:"none" } }>
									{/* 登录表单 star */}
									<ItemY w={Scwidth/24*22} mt="10">
										<Hand h='45' w={Scwidth/24*18} ml={Scwidth/24*2} style={{ borderBottomWidth:1, borderBottomColor:"#eee" }}>
											<Image
												source={require("../../assets/loginphone.png")}
												w="18"
												h="18"
												top="16"
											/>
											<TextInput
												keyboardType="numeric"
												style={{height: 40, width:Scwidth/24*17-25, left:Scwidth/24*1, top:6, fontSize:14, padding:0}}
												onChangeText={(text)=> {
													this.setState({
														loginMobile: text
													})
												}}
												clearTextOnFocus={true}
												placeholder="请输入手机号码"
												placeholderTextColor="#c9c9c9"
												underlineColorAndroid="transparent"
											/>
										</Hand>
										<Hand h='45' w={Scwidth/24*18} ml={Scwidth/24*2}style={{ borderBottomWidth:1, borderBottomColor:"#eee" }}>
											<Image
												source={require("../../assets/loginpass.png")}
												w="18"
												h="18"
												top="16"
											/>
											<TextInput
												style={{height: 40, width:Scwidth/24*17-25, left:Scwidth/24*1, top:6, fontSize:14, padding:0}}
												onChangeText={(text)=> {
													this.setState({
														loginPassword: text
													})
												}}
												clearTextOnFocus={true}
												placeholder="请输入密码"
												placeholderTextColor="#c9c9c9"
												underlineColorAndroid="transparent"
												secureTextEntry={true}
											/>
										</Hand>
									</ItemY>
									{/* 登录表单 end */}

									{/* 登陆按钮 star */}
									<ItemY w={Scwidth/24*22} h="40" x="center" mt="20">
										<TouchableHighlight 
											onPress={this.onLogin}
											style={{ width:Scwidth/24*18, height:40, backgroundColor:"rgba(2, 179, 73, 1)", alignItems:"center", justifyContent:"center", borderRadius:5}}
										>
											<Text style={{ color:"#fff", fontSize:18 }}>登录</Text>
										</TouchableHighlight>
									</ItemY>
									{/* 登陆按钮 star */}

									{/* 忘记密码 end */}
									<ItemY w={Scwidth/24*22} x="center" mt="10">
										<View style={{width:Scwidth/24*18, height:15, alignItems:"flex-end"}}>
											<ItemX>
												<Image
													style={{ width:14, height:14, top:3 }}
													source={require("../../assets/ques_icon.png")}
												/>
												<Text style={{ fontSize:14, color:"#02B349" }}>忘记密码</Text>
											</ItemX>
										</View>
									</ItemY>
									{/* 忘记密码 end */}

								</View>
								{/* 登陆 end */}

								{/* 注册 star */}
								<View style={ this.state.showPage?{}:{ display:"none" } }>
									{/* 注册表单 star */}
									<ItemY w={Scwidth/24*22} mt="10">
										<Hand h='45' w={Scwidth/24*18} ml={Scwidth/24*2} style={{ borderBottomWidth:1, borderBottomColor:"#eee" }}>
											<Image
												source={require("../../assets/loginphone.png")}
												w="18"
												h="18"
												top="16"
											/>
											<TextInput
												keyboardType="numeric"
												style={{height: 40, width:Scwidth/24*17-25, left:Scwidth/24*1, top:6, fontSize:14, padding:0}}
												onChangeText={(text)=> {
													this.setState({
														regMobile: text
													})
												}}
												clearTextOnFocus={true}
												placeholder="请输入手机号码"
												placeholderTextColor="#c9c9c9"
												underlineColorAndroid="transparent"
											/>
										</Hand>
										<Hand h='45' w={Scwidth/24*18} ml={Scwidth/24*2} style={{ borderBottomWidth:1, borderBottomColor:"#eee" }}>
											<Image
												source={require("../../assets/safepass.png")}
												w="18"
												h="18"
												top="16"
											/>
											<TextInput
												style={{height: 40, width:Scwidth/24*17-18-60, left:Scwidth/24*1, top:6, fontSize:14, padding:0}}
												onChangeText={(text)=> {
													this.setState({
														regCode: text
													})
												}}
												clearTextOnFocus={true}
												placeholder="请输验证吗"
												placeholderTextColor="#c9c9c9"
												underlineColorAndroid="transparent"
												secureTextEntry={true}
											/>
											<View style={[{ width:Scwidth/24*1+60, height:26, borderColor:"#00CC66", borderWidth:1, borderRadius:5, alignItems:"center", justifyContent:"center", marginTop:15}]}>
												<TouchableHighlight 
													underlayColor="rgba(0,0,0,0)"
													onPress={this.getVerCode}
												>
													<Text style={[style.green, {fontSize:12}]}>{this.state.VercodeText}</Text>
												</TouchableHighlight>
											</View>
										</Hand>
										<Hand h='45' w={Scwidth/24*18} ml={Scwidth/24*2}style={{ borderBottomWidth:1, borderBottomColor:"#eee" }}>
											<Image
												source={require("../../assets/loginpass.png")}
												w="18"
												h="18"
												top="16"
											/>

											<TextInput
												style={[{height: 40, width:Scwidth/24*17-18-60, left:Scwidth/24*1, top:6, fontSize:14, padding:0}, !this.state.canseePass?{}:{display:"none"}]}
												onChangeText={(text)=> {
													this.setState({
														regPassword: text
													})
												}}
												clearTextOnFocus={true}
												placeholder="请设置6-12位密码"
												placeholderTextColor="#c9c9c9"
												underlineColorAndroid="transparent"
												secureTextEntry={true}
											/>

											<TextInput
												style={[{height: 40, width:Scwidth/24*17-18-60, left:Scwidth/24*1, top:6, fontSize:14, padding:0}, this.state.canseePass?{}:{display:"none"}]}
												defaultValue={this.state.regPassword}
												clearTextOnFocus={true}
												placeholder="请设置6-12位密码"
												placeholderTextColor="#c9c9c9"
												underlineColorAndroid="transparent"
											/>

											<View style={[{ width:Scwidth/24*1+60, height:20, borderRadius:5, alignItems:"flex-end", marginTop:15}]}>
												<TouchableHighlight 
													onPress={this.seePass}
													style={[!this.state.canseePass?{}:{display:"none"}, { width:30, height:30 }]}
													underlayColor="rgba(0,0,0,0)"
												>
													<Image
														w="18"
														h="18"
														source={this.state.seePass} 
													/>
												</TouchableHighlight>
												<TouchableHighlight 
													onPress={this.seePass}
													style={[this.state.canseePass?{}:{display:"none"}, { width:30, height:30 }]}
													underlayColor="rgba(0,0,0,0)"
												>
													<Image
														w="18"
														h="18"
														source={this.state.noseePass} 
													/>
												</TouchableHighlight>
											</View>
										</Hand> 
									</ItemY>
									{/* 注册表单 end */}
									
									{/* 注册按钮 star */}
									<ItemY w={Scwidth/24*22} h="40" x="center" mt="20">
										<TouchableHighlight 
											onPress={this.onReg}
											style={{ width:Scwidth/24*18, height:40, backgroundColor:"rgba(2, 179, 73, 1)", alignItems:"center", justifyContent:"center", borderRadius:5}}
										>
											<Text style={{ color:"#fff", fontSize:18 }}>注册</Text>
										</TouchableHighlight>
									</ItemY>
									{/* 注册按钮 end */}
									
									{/* 阅读协议 star */}
									<ItemY x="center" style={{ width:Scwidth, marginTop:5}}>
										<ItemX>
											<Checkbox
												checked={this.state.regAgreexy}
												style={{ tintColor: '#00CC66', width:12, height:12, marginTop:2, marginRight:3 }}
												onChange={(event: any) => {
													this.setState({ 
														regAgreexy: event.target.checked
													});
												}}								  
											/>
											<TouchableHighlight
												onPress={()=>{
													this.setState({
														showAgreeText:true
													})
												}}
											>
												<Text style={{ color:"#6B6B6B", fontSize:12, }}>我已经并阅读《用户注册协议》</Text>
											</TouchableHighlight>
										</ItemX>
									</ItemY>
									{/* 阅读协议 end */}

								</View>
								{/* 注册 end */}

							</Wrap>
						</View>
					</View>
					{/* 主体内容 end */}

				</Content>
			</Page>
		);
	}
}

/******************************************************************************************
 * Style
 ******************************************************************************************/

const style = StyleSheet.create({
	green:{
		color:"#00CC66"
	},
	gray:{
		color:"#AEAEAE"
	},
	topText:{
		fontSize:20
	},
	topTextActive:{
		borderBottomColor:'#00CC66',
		borderBottomWidth:2,
	},
})